import ListEmpty from '@/components/antd-comp/empty'
import { ConfigProvider, List } from 'antd'
import HighlightedText from './HighlightedText'
import { ManualType } from './index'
import './style/result.less'
import { getUpdateTime } from './utils'

/**
 * 使用指南
 * @param props
 * @returns
 */
const FilterResult = ({
  query,
  resultList,
  handleResultClick
}: {
  query: string
  resultList: ManualType[]
  handleResultClick: (val: string) => void
}) => {
  const handleResultListClick = (title: string) => {
    handleResultClick(title)
  }
  return (
    <div className="filter-result">
      <div className="result-list">
        <ConfigProvider renderEmpty={() => <ListEmpty />}>
          <List
            itemLayout="horizontal"
            dataSource={resultList}
            split={false}
            renderItem={item => (
              <List.Item className="result-item" key={item.title}>
                <div>
                  <div className="result-title" onClick={() => handleResultListClick(item.title)}>
                    <HighlightedText text={item.title} query={query} />
                  </div>
                  <div className="result-desc">
                    <HighlightedText text={item.content.substring(0, 200)} query={query} />
                  </div>
                  <div className="result-item-bottom">
                    <div>{''}</div>
                    <div>
                      <div>更新时间：&nbsp;{getUpdateTime(item.content.substring(0, 50))}</div>
                    </div>
                  </div>
                </div>
              </List.Item>
            )}
          />
        </ConfigProvider>
      </div>
    </div>
  )
}

export default FilterResult
